<template>
  <div class="resume_header">
    <span>用户简历详情</span>

  </div>
  <div class="resume_center">

    <el-table :data="filterTableData.slice((page - 1) * limit,page*limit)" style="width: 100%" height="400px"
      size="large">

      <el-table-column label="姓名" prop="uName" width="100px" />
      <el-table-column label="申请岗位" prop="jobName" width="300px" />
      <el-table-column label="工作类型" prop="uNature" />
      <el-table-column label="期望薪资" prop="uSalary">
        <template #default="scope">
          {{scope.row.uSalary}}元/月
        </template>
      </el-table-column>

      <el-table-column label="状态" prop="uApplyState" />

      <el-table-column align="right" width=300px>
        <template #header>
          <el-input v-model="search" size="default" placeholder="搜索" />
        </template>
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleShowResume(scope.$index, scope.row)">查看简历</el-button>
          <el-button size="small" type="success"
            :disabled="scope.row.uApplyState=='未通过'|| scope.row.uApplyState=='已通过'?true:false"
            @click="handleQualifieddResume(scope.$index, scope.row)">通过
          </el-button>
          <el-button size="small" type="success"
            :disabled="scope.row.uApplyState=='未通过'|| scope.row.uApplyState=='已通过'?true:false"
            @click="handleUnqualifieddResume(scope.$index, scope.row)">不合适
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination :page="page" :limit="limit" :handleSizeChange="handleSizeChange"
        :handleCurrentChange="handleCurrentChange" :filterTableData="filterTableData" :pagesizes="pagesizes" />
    </div>
  </div>
  
  <PreviewUserResume @handleCloseResume="handleCloseResume" v-if="dialogTableVisible" :userInfo="userInfo"/>
</template>
<script lang='ts'>
// import PreviewUserResume from "./PreviewUserResume.vue"
import { computed, ref, onMounted, reactive, watch, onBeforeMount } from 'vue'
import { useStore } from "vuex"
import PreviewUserResume from "@/components/enterprise/PreviewUserResume.vue"
import { upEUserResumeState, getEUserApplyJobs } from "@/api/enterpriseApi"
import {  elmessage,data } from "@/hook/hook"
import { useRouter } from "vue-router"
export default {
  // components:{PreviewUserResume},
  setup() {
    // 该组件是要请求后端拿到对应的数据

    const dialogTableVisible = ref(false)
    
    const store = useStore()
    const router = useRouter()
    const isShow = ref(false)
    // 表格数据定义
//     const Headerdata = {
//   loginId: store.state.authState.loginId,
//   identity: store.state.authState.identity,
//   token: store.state.authState.token,
// }
    interface ApplyResume {
      jobId: string
      jobName: string
      uId: string
      uName: string
      uNature: string
      uSalary: string
      uApplyState: string
    }
    const tableData: ApplyResume[] = reactive([])

    const search = ref('')
    const userInfo=ref()
    const filterTableData = computed(() =>
      tableData.filter(
        (data) =>
          !search.value ||
          // 通过岗位名称筛选
          // data.name.toLowerCase().includes(search.value.toLowerCase())
          data.uName.toLowerCase().indexOf(search.value.toLowerCase()) !== -1
      )
    )

    // 预览简历
    const handleShowResume = (index: number, row: ApplyResume) => {
      dialogTableVisible.value = true
      userInfo.value=row
      // 查看简历后，请求后台修改对应用户岗位申请状态
      // store.commit("upUserApply")

    }
    // 关闭预览简历
    const handleCloseResume=(index: number, row: ApplyResume)=>{
      dialogTableVisible.value=false
    }

    // 通过
    const handleQualifieddResume = async (index: number, row: ApplyResume) => {
      tableData.forEach((value, index, self) => {
        if (value.uId == row.uId && value.jobId == row.jobId) {
          value.uApplyState = "已通过"
        }
      })
      console.log(row);
      const newData = {
        ...data(),
        uApplyState: "已通过",
        jobId: row.jobId,
        uId: row.uId,
      }
      upEUserResumeState(newData).then((res: any) => {
        if (res.data["code"] == "200") {
          elmessage(res.data["message"], res.data["type"])
        } else if (res.data["code"] == "300") {
          elmessage(res.data["message"], res.data["type"])
          setTimeout(() => {
            router.replace("/login")
          }, 500);
          localStorage.clear()
        } else {
          console.log(res.data);

        }
      })

    }
    // 不合适
    const handleUnqualifieddResume = (index: number, row: ApplyResume) => {
      tableData.forEach((value, index, self) => {
        if (value.uId == row.uId && value.jobId == row.jobId) {
          value.uApplyState = "未通过"
        }
      })
      console.log(row);
      const newData = {
        ...data(),
        uApplyState: "未通过",
        jobId: row.jobId,
        uId: row.uId,
      }
      upEUserResumeState(newData).then((res: any) => {
        if (res.data["code"] == "200") {
          elmessage(res.data["message"], res.data["type"])
        } else if (res.data["code"] == "300") {
          elmessage(res.data["message"], res.data["type"])
          setTimeout(() => {
            router.replace("/login")
          }, 500);
          localStorage.clear()
        } else {
          console.log(res.data);

        }
      })
    }

    // 分页器
    const page = ref(1)
    const pagesizes = ref([1, 2, 3, 4, 10, 20, 30, 40])
    const limit = ref(10)

    const handleSizeChange = (val: number) => {

      limit.value = val
      page.value = 1

    }
    const handleCurrentChange = (val: number) => {
      page.value = val

    }

    const init = async () => {
      await getEUserApplyJobs(data()).then((res: any) => {
        if (res.data["code"] == "200") {
          res.data.datas.forEach((value: any, index: any, self: any) => {
            tableData.push(value)
          })
        } else if (res.data["code"] == "300") {
          elmessage(res.data["message"], res.data["type"])
          setTimeout(() => {
            router.replace("/login")
          }, 500);
          localStorage.clear()
        } else {
          console.log(res.data);
        }

      })
    }

    onBeforeMount(() => {
      init()
    })
    return {
      PreviewUserResume,
      isShow,
      search,
      filterTableData,
      userInfo,
      handleShowResume,
      handleCloseResume,
      handleQualifieddResume,
      handleUnqualifieddResume,
      dialogTableVisible,
      page,
      pagesizes,
      limit,
      handleSizeChange,
      handleCurrentChange,

    };
  },
};
</script>
<style scoped>
.pagination {
  float: right;
  margin-right: 50px;
  /* right: 150px; */
}

.resume_center {
  font-family: '微软雅黑';
  height: 800px;
  background-color: #FFF;
}

.resume_header {
  background-color: rgb(215, 215, 215);
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;

}

a {
  text-decoration: none;
  color: #000;
}


.level .el-progress--line {
  margin-bottom: 15px;
  width: 200px;
  display: flex;
  align-items: center;
  margin-top: 4px;
}

/* 简历 */
.preview .resume {
  width: 820px;
  display: flex;
  /* box-shadow: 8px 1px 10px #d8d8d8;
  margin: 50px auto; */
  border: 0.5px solid #254665;
  height: 800px;
}

.preview .resume .wrapper>.title {
  border-bottom: 1px solid #254665;
  padding: 3px 0;
  font-size: 22px;
}

/* 简历左边信息 */
.preview .resume .left {
  width: 270px;
  background-color: #254665;
  color: #FFFFFF;
}

.preview .resume .left .wrapper {
  padding: 0 30px;
  border: 1px solid #254665;
}

.preview .resume .left .image-wrapper {
  width: 120px;
  height: 150px;
  border: 2px solid #FFFFFF;
  background-color: #FFFFFF;
  margin: 60px auto 0;
}

.preview .resume .left .image-wrapper img {
  width: 120px;
  height: 150px;
}

.preview .resume .left .base-info {
  display: flex;
  flex-direction: column;
  padding: 30px;
}

.preview .resume .left .base-info span {
  margin: 6px 0;
}

.preview .resume .left .specialty .list .item {
  margin-bottom: 12px;
}

.preview .resume .left .specialty {
  /* display: flex; */
  align-items: center;
  margin-top: 4px;
}

.preview .resume .left .specialty .level>span {
  width: 60px;
  text-align: center;
}

.preview .resume .left .specialty .progress-wrapper {
  width: calc(100% - 60px);
  height: 10px;
}

/* 简历右边信息 */
.preview .resume .right {
  flex: 1;
  color: #254665;
  padding: 20px 20px 30px 20px;
}

.preview .resume .right .list .item:not(:first-child) {
  margin-top: 20px;
}

.preview .resume .right .list .item .title {
  margin: 4px 0;
}

.preview .resume .right .list .item .title>span {
  margin-right: 40px;
}

.preview .resume .right .wrapper {
  /* border: 1px solid #FFFFFF; */
  height: 90px;
}

.wrapper {
  margin: 10px 0;
}

.preview .resume .right .name-wrapper {
  display: flex;
  vertical-align: bottom;
  align-items: baseline;
  margin: 8px 0;
  /* border: 1px solid #FFFFFF; */
  /* font-size: 32px; */
  line-height: 50px;
}

.preview .resume .right .name-wrapper h1 {
  font-weight: normal;
  margin: 0;
  font-size: 40px;
}

.preview .resume .right .name-wrapper span {
  font-size: 15px;
  height: 20px;
  margin-left: 16px;
  color: #7a7a7a;
}

.preview .resume .right .job-intention .intention>span {
  margin-right: 24px;

}

.intention {
  margin: 15px 0;
}

.list {
  margin: 15px 0;
}

.preview .resume .right .education .item .desc,
.preview .resume .right .projects .item .desc,
.preview .resume .right .honors .honor,
.preview .resume .right .self-evaluation .evaluation,
.preview .resume .right .internship .item .desc {
  color: #8c8c8c;
  font-size: 14px;
}

.preview .resume .right .honors .honor {
  margin: 2px 0;
}

.preview .resume .right .internship .item ul li {
  list-style: disc;
  margin: 4px 0 0 20px;
}
</style>